// mobile bind
// ============

define(['zepto', 'sui', 'submitForm'], function($){
  return {
    init: function(data) {
      
      this.initBeginDate(data.beginDate)
      
      if(data.single) {
        
        // init hour picker
        this.initHours()
        
      } else {
        
        // init week & hour picker
        this.initArrange()
        
      }
      
      this.submit(data.studentId, data.single)
      
    },
    
    initBeginDate: function(date) {
      
      var $picker = $("input[name='beginDate']")
      
      $picker.calendar({
        value: [date],
        minDate: date,
        inputReadOnly: true
      })
      
    },
    
    initArrange: function() {
      $("input[name='dayhour-select']").picker({
        toolbarTemplate: '<header class="bar bar-nav">\
                            <button class="button button-link pull-right close-picker">确定</button>\
                            <h1 class="title">选择周几与具体时间段</h1>\
                          </header>',
        cols: [
          {
            textAlign: 'center',
            values: ['0', '1', '2', '3', '4', '5', '6'],
            displayValues: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },{
            textAlign: 'center',
            values: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'],
            displayValues: ['10:00 ~ 11:00', '11:00 ~ 12:00', '12:00 ~ 13:00', '13:00 ~ 14:00', '14:00 ~ 15:00', '15:00 ~ 16:00', '16:00 ~ 17:00', '17:00 ~ 18:00', '18:00 ~ 19:00', '19:00 ~ 20:00', '20:00 ~ 21:00']
          }
        ],
        formatValue: function (picker, value, displayValue){
          $(this.input).next().val(value[0] + "|" + value[1])
          
          displayValue = displayValue[0] + "    " + displayValue[1]
          
          return displayValue
        }
      });
    },
    
    initHours : function() {
      $("input[name='dayhour-select']").picker({
        toolbarTemplate: '<header class="bar bar-nav">\
                            <button class="button button-link pull-right close-picker">确定</button>\
                            <h1 class="title">选择具体时间段</h1>\
                          </header>',
        cols: [
          {
            textAlign: 'center',
            values: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'],
            displayValues: ['10:00 ~ 11:00', '11:00 ~ 12:00', '12:00 ~ 13:00', '13:00 ~ 14:00', '14:00 ~ 15:00', '15:00 ~ 16:00', '16:00 ~ 17:00', '17:00 ~ 18:00', '18:00 ~ 19:00', '19:00 ~ 20:00', '20:00 ~ 21:00']
          }
        ],
        
      });
    },
    
    calculateDayHour: function() {
      var beginDateString = $("input[name='beginDate']").val()
      if(beginDateString.split("") == "") {
        $.toast('请先选择日期');
        return false;
      }
      var beginDateStrings = beginDateString.split("-")
      var beginDate = new Date(beginDateStrings[0], beginDateStrings[1] - 1, beginDateStrings[2])
      var offset = beginDate.getDay() - 1
      
      var pickerValue = $("input[name='dayhour-select']").val()
      if(pickerValue.split("") == "") {
        $.toast('请先选择日期');
        return false;
      }
      
      $("input[name='dayhours']").val(offset + "|" + pickerValue)
      
      return true
    },
    
    submit : function(studentId, single) {
      var that = this
      $("form").submitform({
        beforeSubmit: function() {
          if(single) {
            return that.calculateDayHour()
          }else {
            return true;
          }
        },
        successUrl: __CTX__.root + "/students/" + studentId
      })
    }
    
  }

})

